import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { TopRangkingWarpper } from './style';
import CommonHeader from '@/components/common-header';
import { shallowEqualApp, useAppSelector } from '@/store/hooks';
import TopRankingItem from '../top-ranking-item';
interface IProps {
  children?: ReactNode;
}

const TopRanking: FC<IProps> = (props) => {
  const { ranks } = useAppSelector(
    (state) => ({
      ranks: state.recommended.ranking,
    }),
    shallowEqualApp
  );
  return (
    <TopRangkingWarpper>
      <CommonHeader
        icon={'sprite_02'}
        iconShow={true}
        name={'榜单'}
        moreLink={'/discover/ranking'}
        keywords={[]}
      ></CommonHeader>
      <div className="rank-bg recommended_bg">
        {ranks.map((rank) => {
          return <TopRankingItem item={rank} key={rank.id}></TopRankingItem>;
        })}
      </div>
    </TopRangkingWarpper>
  );
};

export default memo(TopRanking);
